在本教程中，我们将了解如何在前端应用程序旁边部署服务器的功能，并创建一个 API 来生成图像并从链接中获取元数据。

借助无服务器功能，开发人员可以在其应用程序中创建和实现现代特性和功能，而无需经历设置和管理后端服务器的痛苦。这些功能由云计算公司托管和部署。

Netlify 函数使托管在Netlify上的应用程序可以轻松创建和部署无服务器函数。

要学习本教程，您需要熟悉 JavaScript、Vue.js、Git、GitHub 和Netlify。您还应该有一个安装了Vetur （用于 IntelliSense）的文本编辑器（例如VS Code），并在您的机器上安装了最新版本的 Node。他们可以在此处安装 Node 。您可以通过在终端中运行命令来检查您的身份 Node 版本。node -v

您还应该在 Netlify 上面拥有一个帐户。如果您还没有，您可以创建一个。

为了展示如何使用前端应用程序轻松设置无服务器功能，我们将构建一个带有自定义链接预览器组件的应用程序。

该组件向我们的无服务器函数发送带有 URL 的请求。然后，该函数使用 Puppeteer 使用 URL 从目标站点获取元数据并生成站点的屏幕截图。

该函数将元数据和屏幕截图发送回我们前端的组件，以将其显示为应用程序中的链接预览。

这是部署在 Netlify 上面是示例项目的链接。这里是GitHub Repo跟随。

我们将使用Vue CLI创建一个 Vue 3 应用程序。我们还将安装和设置Tailwind CSS，这是一个实用程序优先的 CSS 框架，它提供了我们可以用于我们的应用程序的类，而无需编写大量自定义 CSS。

为了快速搭建 Vue 应用程序，我们将使用 Vue CLI。要安装 Vue CLI，请运行：

安装 CLI 后面，我们可以通过运行以下命令创建项目：

这将提示我们为我们的安装选择一个预设。我们将选择“手动选择功能”，以便我们可以选择我们需要的功能。以下是我选择的选项：

选择这些选项后，系统会询问我们是否要将选项保存为预设以供以后使用。选择Y（是）或N（否）并继续安装。

运行cd link-previewer进入新创建的项目。

要安装 Tailwind，我们将使用PostCSS 7 兼容性构建，因为 Tailwind 依赖于 PostCSS 8——在撰写本文时，Vue 3 还不支持它。卸载任何以前的 Tailwind 安装并重新安装兼容性构建：

接下来，生成tailwind.config.js和postcss.config.js文件：

tailwind.config.js这将在项目的根目录创建一个最小文件。

在该tailwind.config.js文件中，purge使用所有页面和组件的路径配置选项，以便 Tailwind 可以在生产构建中对未使用的样式进行树摇动：

创建./src/assets/css/main.css文件并使用@tailwind指令包含 Tailwind 的base、components和utilities样式：

Tailwind 将在构建时将这些指令与它基于配置的设计系统生成的所有样式交换出来。

最后，确保在文件中导入 CSS./src/main.js文件：

)

就是这样，我们可以运行我们的服务器：

npm run serve

现在应用程序正在运行，如果我们转到提供的 URL，我们应该会看到 Vue 的默认演示应用程序，并看到 Tailwind 的预检基本样式已被应用。

为了获得更流畅的开发体验，请安装适用于 VS Code 的Tailwind CSS Intellisense 扩展。

以下是我们的项目文件夹应该是什么样子的概述：

Netlify Functions是一款 Netlify 产品，可简化创建和部署无服务器函数的过程。根据该产品的主页，它用于：

部署用作 API 端点、自动运行以响应事件或在后台处理更复杂作业的服务器端代码。

一个基本的 Netlify 函数文件使用以下语法导出一个处理程序方法：

Netlify 在调用/调用函数时提供event和参数。context当一个函数的端点被调用时，handler接收一个event像这样的对象：

另一方面，context参数包括有关调用函数的上下文的信息。

在函数中，我们返回一个具有两个重要属性的对象：

statusCode,200在这种情况下

body，这是一个字符串化的对象。

该函数将/.netlify/functions/hello在成功时从我们的站点调用，它将返回 200 状态码和消息“Hello, World!”。

现在我们已经了解了 Netlify 函数的工作原理，让我们在实践中看看它们。

为了创建我们的第一个 Netlify 函数，我们将functions/hello.js在项目目录中创建一个新文件并输入以下内容：

一旦我们创建了函数文件，我们必须进行一些必要的配置，以便我们在本地运行我们的函数。

我们将netlify.toml在项目文件夹的根目录下创建一个文件，告诉 Netlify 在哪里可以找到我们的函数：

Netlify 现在将functions在构建时定位并部署文件夹中的函数。

要在本地运行我们的功能而不必部署到 Netlify，我们需要安装Netlify CLI。CLI 允许我们在本地部署具有一些出色的能力 Netlify 功能的项目。

要安装 CLI，请确保您拥有Node.js版本 10 或者更高版本，然后运行：

这将全局安装 Netlify CLI，因此我们可以netlify从任何目录运行命令。要获取版本、使用情况等，我们可以运行：

要使用 Netlify CLI 在本地运行我们的项目，请停止开发服务器（如果它处于活动状态），然后运行：

这是我们应该看到的事情：

如果你仔细观察，你会发现那里发生了一些事情：

Netlify 尝试将我们.env文件中的环境变量注入到构建过程中，然后我们的 Netlify 函数可以访问这些变量。在这种情况下，我们没有.env文件，因此它会加载process.

其次，它加载或部署位于函数目录中的函数。Functions 服务器部署在一个不同的随机端口上 - 36647.

最后，它会自动检测应用程序是用什么框架构建的，并运行必要的构建过程来部署应用程序。在这种情况下，您可以看到“使用 Vue.js 启动 Netlify Dev”。它还支持 React 和其他流行的框架。

Netlify 然后在http://localhost:8888.

现在我们的服务器已经启动并且我们的函数已经加载，我们可以调用它。默认情况下，我们可以使用以下路由访问我们的函数：/.netlify/functions/.

需要注意的一件重要事情是，我们不需要指定 Functions 服务器运行的端口。我们可以使用上面的默认路由与我们的 Functions 服务器进行通信。Netlify 在后台自动解析 URL 和端口。

如果我们向http://localhost:8888/.netlify/functions/helloGET发送请求，我们应该得到.{"message":"Hello, World!"}

伟大的！我们的第一个无服务器功能有效！

现在我们的 Netlify 函数可以工作了，我们可以开始构建预览 API。以下是我们的 Functions API 将要执行的操作的简要说明：

它接收将从前端发送的目标 URL

它将数据传递给 Puppeteer

Puppeteer 然后启动一个新的无头浏览器实例

Puppeteer 在浏览器中打开一个新页面并导航到目标 URL

然后 Puppeteer 提取和标签的内容，用于目标页面的描述

它捕获页面的屏幕截图

它将屏幕截图数据发送回前端

现在我们对 Functions API 将要做什么有了基本的了解，我们可以开始创建 Functions。让我们从为 Netlify Functions 安装和设置 Puppeteer 开始。

Puppeteer是一个 Node 库，它提供了一个高级 API 来控制无头 Chrome 或 Chromium 浏览器。它也可以配置为使用完整的（非无头）铬或铬。您可以使用 Puppeteer 在浏览器中手动完成大部分操作。更多关于 Puppeteer的信息可以在 Puppeteer 文档中找到。

为了开始使用 Puppeteer，我们将把它安装到我们的项目中。

Puppeteer 下载了最新版本的 Chromium（约 170MB macOS、约 282MB Linux、约 280MB Windows），该版本保证可与 API 一起使用。

我们不能使用完整的puppeteer包进行生产。这是因为 Netlify Functions 的最大大小为 50MB，而 Chromium 包太大。

感谢Ire Aderinokun的这篇非常有用的文章，我们仍然可以在本地和生产环境中使用 Puppeteer。这是我们必须做的：

puppeteer作为本地部署的开发依赖项安装：

npm i puppeteer --save-dev

为了让 Puppeteer 在本地和生产环境中工作，我们必须安装puppeteer-core和chrome-aws-lambda作为生产依赖项。

您可以在此处puppeteer查看和之间的区别。但是，主要区别在于安装时不会自动下载 Chromium。puppeteer-core puppeteer-core

由于puppeteer-core不下载浏览器，我们将安装chrome-aws-lambda，一个“用于 AWS Lambda 和 Google Cloud Functions 的 Chromium 二进制文件”，我们可以在 Netlify 函数中使用它。这些是可以在生产中使用的包：

npm i puppeteer-core chrome-aws-lambda --save-prod

现在我们已经安装了我们的包，让我们创建我们的函数。

如果 Puppeteer 在本地安装完整的浏览器会成为问题，那可能是由于网络速度慢或带宽问题。有一种解决方法，即使用我们已经安装的 Chrome 或 Chromium 浏览器来运行 Puppeteer。

我们需要的是本地机器上浏览器的路径。我们将把它用作我们的executablePath，我们将把它传递给puppeteer.launch()方法。这告诉 Puppeteer 在哪里可以找到浏览器可执行文件。

如果您不知道在哪里可以找到可执行路径，请打开浏览器并转到chrome://version/以显示 chrome 的版本。

.env复制路径并在项目的根目录中创建一个文件。

# ./.envEXCECUTABLE_PATH=

要获取.env文件的内容，我们将安装另一个包—— dotenv：

npm install dotenv

现在我们已经成功安装了包，让我们创建 Netlify 函数。

创建一个新文件，./functions/generate-preview.js：

在上面的代码中，我们做了很多事情。首先，我们targetURL从 中的请求有效负载中获取event.body。这将与POST请求一起发送。

接下来，我们使用该chrome-aws-lambda包启动浏览器。我们使用puppeteer.launch()方法来做到这一点。此方法接受一个对象作为具有一些可选属性的参数。我们传递给此方法的一个重要属性是executablePath.

我们将 分配executablePath给process.env.EXCECUTABLE_PATH || await chromium.executablePath使包能够找到可用的无头浏览器以启动。

browser.newPage()浏览器启动后，我们使用该方法在浏览器中打开一个新页面。page.setViewport()我们还使用该方法为页面设置所需的浏览器视口。

请注意，我们await在运行任何函数时都使用了关键字。这是因为 Puppeteer 是异步工作的，有些函数可能需要一些时间才能执行。

我们还可以使用 Puppeteerpage.emulateMediaFeatures()方法定义页面的媒体特征，该方法采用媒体特征对象数组。这就是我们设置prefers-color-schemeto的方式dark。

接下来，我们将导航到目标 URL 并获取我们的标题、描述和屏幕截图：

在上面的代码中，我们使用一个trycatch块来包装我们的代码，这样，如果出现任何问题，从await page.goto(targetURL)导航到目标 URL 的 开始，我们可以捕获错误并将其发送到我们的前端。提供无效 URL 可能会发生错误。

如果 URL 有效，我们使用 方法获取标题page.$eval()，这类似于document.querySelectorJavaScript 中的常用方法。我们传入head > title标题标签的 CSS 选择器——作为第一个参数。我们还传递了一个函数el => el.textContent作为第二个参数，其中el是我们传递给函数的参数并且是title元素。我们现在可以使用title.textContent.

请注意，所有这些都包含在括号 ( ()) 中，并且我们有一个|| nullafter page.$eval。title如果page.$eval()无法获取页面标题，则将其分配为 null。

要获取页面的描述，我们将使用该page.evaluate()方法，它允许我们运行一些客户端 JavaScript 并向分配的变量返回一个值 - descriptions。

我们将一个函数作为参数传递给该page.evaluate()方法。在我们document.querySelector用来获取各种元描述的函数中，例如默认描述和OpenGraph 描述。

获取元素后，如果元素存在，或者元素不存在，我们使用三元运算符获取content并将其添加到对象中。descriptionsnull

获得描述后，我们使用page.screenshot()方法截取页面并使用 关闭浏览器browser.close()。

最后，我们将body属性中的页面详细信息发送到一个 JSON 对象，其中statusCode包含200. 如果在前面的任何步骤中发生错误，它会被捕获在catch块中，我们会发送 a statusCodeof400和错误消息。

让我们使用 API 测试器测试我们的功能。您可以在浏览器中安装Postman或Talend API 测试器，或使用Thunder Client 扩展，这是 VS Code 的 API 测试器。

您还可以使用 cURL：

netlify dev使用命令运行函数。

我们可以使用函数服务器的端口或:8888Netlify 开发服务器的默认端口发送请求，以向我们的函数发送请求。我将使用包含以下对象的对象http://localhost:8888/.netlify/functions/generate-preview发送POST请求：targetURLbody

当我们发送请求时，这是我们得到的响应。

我们得到一个包含预览数据的 JSON 对象：

现在我们的无服务器功能可以工作了，让我们看看如何在前端使用它。

为了与我们的generate-preview函数交互，我们需要发送POST包含我们的targetURL.

我们将创建LinkPreview显示正常链接的组件。这些组件将作为道具传递其目标 URL。在组件安装到应用程序之前，它会向我们的无服务器函数发送一个POST请求，获取预览数据，并在我们将鼠标悬停在链接上时显示它。targetURL

首先，让我们创建我们的链接预览组件src/components/LinkPreviewer.vue。

在我们的中，我们将通过向我们的无服务器函数发送请求来获取链接预览数据，并将数据保存在previewData对象中。稍后我们将在模板中使用它来显示数据：

在上面的代码中，我们将targetURL作为 props 传递给我们的组件。

在 中setup()，我们作为参数传递props，以便我们访问像targetURL.

然后，我们使用:创建一个响应式peviewData对象。在一个新函数中，我们用来向我们的无服务器函数发送一个包含 的请求。此函数返回响应或如果发生错误。refconst previewData = ref({})generatePreview()fetchPOSTtargetURLnull

接下来，要在挂载组件之前运行该函数，我们使用onBeforeMount()钩子。我们传递一个async函数作为参数。在函数内，我们分配previewData.value给generatePreview()函数。desc, og, twitter然后从descriptions属性中获取描述 ( )。

为了获得将在预览中显示的描述，我们将分配previewData.value.description给(desc || og || twitter || ""). 这样，第一个具有值的属性被分配给description.

这样做以在我们的模板中显示预览数据：

在上面的代码中，为了显示我们的图像（本质上是一个base64字符串），我们必须将字符串与图像类型和编码等数据一起传递到src-""属性中。

这就是我们的LinkPreviewer.vue组件。让我们看看它的实际效果。在./src/views/Home.vue：

在我们的Home.vue文件中，我们基本上使用demoLinks链接数组来呈现LinkPreviewer组件列表，我们将其传递给targetURL组件的 props。

我们还有一个元素，我们用它来动态地将更多LinkPreviewer组件添加到列表中。

这是我们的简单应用程序现在的样子。

甜的！我们的应用程序有效。由于我们一直使用 Netlify CLI 在本地运行，让我们看看如何使用 CLI 部署到 Netlify。

在我们将我们的应用程序部署到 Netlify 之前，我们必须为生产构建我们的应用程序：

这将构建我们的应用程序并创建一个dist/我们可以部署到生产环境的文件夹。

接下来，我们需要登录到我们的 Netlify 帐户：

这将使您在浏览器中登录您的 Netlify 帐户。

授权应用程序后，我们可以将我们的项目链接到一个新站点。Netlify 会问我们一堆问题：

你想干什么？选择“创建和配置新站点”。

团队？选择。

选择一个独特的网站名称？选择。

请提供发布目录（例如“public”或“dist”或“.”）。输入dist。

在此之后，Netlify 将上传我们的文件并将它们部署到我们的新站点。

或者，我们可以决定从 GitHub 部署我们的网站。您所要做的就是登录 GitHub，创建一个新存储库，并将 URL 复制到我们新创建的存储库。

然后我们在项目文件夹中运行以下命令：

注意：由于身份验证问题，您可能无法从终端推送到您的存储库，并且您可能会从 Git 收到如下消息：“对密码身份验证的支持已于 2021 年 8 月 13 日删除。请使用个人访问令牌反而。” 这意味着您必须创建一个个人访问令牌 (PAT) 并使用它来登录。为此，请转到GitHub 令牌设置并生成一个新令牌。选择所需的所有权限。确保您能够访问存储库。生成 PAT 后，将其复制并保存在某处。然后git push -u origin main再次尝试该命令并在要求您输入密码时粘贴您的 PAT。

将项目推送到 GitHub 后，前往 Netlify从 GitHub 创建一个新站点。

按照步骤选择存储库并输入项目的构建设置。对于我们的 Vue 项目，构建命令是npm run build，部署目录是dist.

之后，单击Deploy site。

Netlify 将部署站点，我们可以通过单击提供的部署链接来预览我们的站点。我们可以通过从顶部菜单转到功能来查看我们的功能。

您可以选择一项功能以查看更多详细信息和日志。

我们已经能够使用 Netlify 函数通过 Netlify 创建和部署无服务器函数。我们还看到了如何与 Vue 前端的函数进行交互。这一次，我们习惯了它截屏并从其他网站获取数据，并用它构建了一个链接预览器组件，但我们可以做的还有很多。借助无服务器功能，我们可以在前端做更多事情，而无需费心设置后端服务器。

如果本文对你有帮助，别忘记给我个3连 ，点赞，转发，评论，，咱们下期见。

收藏 等于白嫖，点赞才是真情。

亲爱的小伙伴们，有需要JAVA面试文档资料请点赞＋转发，关注我后，私信我333就可以领取免费资料哦